<template>
  <!-- <div class="dashboard-container"> -->
  <div class="app-container">
    <el-card class="page-tools">
      <el-row type="flex" justify="space-between">
        <el-col>
          <el-row type="flex" justify="space-between">
            <el-input
              v-model="page.username"
              placeholder="根据用户名搜索"
            ></el-input>

            <el-button
              style="margin-left: 10px"
              size="medium"
              @click="getAllUser"
              >清空</el-button
            >
            <el-button type="primary" size="medium" @click="searchUser"
              >搜索</el-button
            >
          </el-row>
        </el-col>
        <el-col>
          <el-row type="flex" justify="end">
            <el-button
              type="warning"
              @click="showDialog = true"
              icon="el-icon-edit"
              size="small"
              >新增用户</el-button
            >
          </el-row>
        </el-col>
      </el-row>
      <el-col class="record" style="margin: 20px 0">
        <i class="el-icon-info" />
        <span>{{ `${total}条记录` }} </span>
      </el-col>

      <el-table :data="list">
        <el-table-column label="序号" prop="number">111</el-table-column>
        <el-table-column label="邮箱" prop="email"> </el-table-column>
        <el-table-column label="联系电话" prop="phone" />
        <el-table-column label="用户名" prop="username" />
        <el-table-column label="权限组名称" prop="permission_group_title" />

        <el-table-column label="角色" prop="role"> </el-table-column>

        <el-table-column label="操作" fixed="right" width="180px">
          <template slot-scope="{ row }">
            <!-- 编辑按钮 -->
            <el-button
              @click="editUser(row.id)"
              type="primary"
              icon="el-icon-edit"
              circle
            ></el-button>
            <!-- 删除按钮 -->
            <el-button
              @click="deleteUser(row.id)"
              type="danger"
              icon="el-icon-delete"
              circle
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end" align="middle" style="height: 80px">
        <el-pagination
          prev-text="上一页"
          next-text="下一页"
          layout="prev, pager, sizes,next,jumper"
          :page-size.sync="page.pagesize"
          :current-page.sync="page.page"
          :total="total"
          :page-sizes="[10, 20, 30, 40]"
          @current-change="getEmployeeList"
          @size-change="getEmployeeList"
        />
      </el-row>
    </el-card>
    <!-- 新增用户弹层 -->
    <el-dialog
      :title="userId ? '编辑用户' : '添加用户'"
      :visible.sync="showDialog"
      @close="closeDialog"
    >
      <!-- 表单 -->
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            v-model="formData.username"
            style="width: 80%"
            placeholder="请输入姓名"
          />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input
            v-model="formData.email"
            style="width: 80%"
            placeholder="请输入邮箱"
          />
        </el-form-item>
        <el-form-item v-if="!userId" label="密码" prop="password">
          <el-input
            type="password"
            v-model="formData.password"
            style="width: 80%"
            placeholder="请输入密码"
          />
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-input
            v-model="formData.role"
            style="width: 80%"
            placeholder="请输入角色"
          />
        </el-form-item>
        <el-form-item label="权限组名称" prop="permission_group">
          <el-select
            v-model="formData.permission_group_id"
            style="width: 80%"
            placeholder="请选择"
          >
            <el-option
              v-for="item in permissionList"
              :key="item.id"
              :value="item.id"
              :label="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input
            v-model="formData.phone"
            style="width: 80%"
            placeholder="请输入联系电话"
          />
        </el-form-item>
        <el-form-item label="介绍">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入介绍内容"
            v-model="formData.introduction"
            style="width: 80%"
          >
          </el-input>
        </el-form-item>
      </el-form>

      <!-- footer插槽 -->
      <template v-slot:footer>
        <el-row type="flex" justify="center">
          <el-col :span="6">
            <el-button size="small" @click="closeDialog">取消</el-button>
            <el-button type="primary" size="small" @click="addUser"
              >确定</el-button
            >
          </el-col>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  getUserlist,
  add,
  update,
  detail,
  remove,
  simple
} from '@/api/base/users.js'

export default {
  data () {
    return {
      // 添加用户的弹层
      formData: {
        avatar: '',
        email: '', // 邮箱
        introduction: '',
        password: '', // 密码
        permission_group_id: '', // 权限组名称
        phone: '', // 联系电话
        role: '', // 角色
        username: '' // 用户姓名
      },
      permissionList: [
        {
          id: 1,
          value: '编辑组'
        },
        {
          id: 2,
          value: '超级管理组'
        }
      ],
      // value: '', // 当前选中选项的值
      // 校验规则
      rules: {
        username: [
          { required: true, message: '用户姓名不能为空', trigger: 'blur' },
          {
            min: 1,
            max: 10,
            message: '用户姓名为1-10位'
          }
        ],
        email: [{ required: true, message: '邮箱不能为空', trigger: 'blur' }],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          {
            min: 6,
            max: 12,
            message: '用户姓名为6-12位'
          }
        ],
        role: [
          { required: true, message: '角色名称不能为空', trigger: 'blur' }
        ],
        // permission_group: [
        //   { required: true, message: '权限组不能为空', trigger: 'change' }
        // ],
        phone: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '手机号格式不正确',
            trigger: 'blur'
          }
        ]
        // introduce: [
        //   { required: true, message: '介绍不能为空', trigger: 'change' }
        // ]
      },
      // 主界面数据
      userId: '',
      // defaultImg,
      showDialog: false,
      loading: false,
      list: [], // 接数据的
      page: {
        page: 1, // 当前页码
        pagesize: 20,
        username: ''
      },
      total: 0 // 总数
    }
  },
  created () {
    this.getUserList()
  },
  methods: {
    // 清空搜索并重新请求所有的用户
    async getAllUser () {
      this.page.username = ''
      this.loading = true
      const {
        data: { counts, list }
      } = await getUserlist(this.page)
      // console.log(res)
      this.total = counts
      this.list = list
      this.loading = false
    },
    // 搜索用户
    async searchUser () {
      if (this.page.username.trim() === '') return
      const data = {
        ...this.page
      }
      const res = await simple(data)
      console.log(res.data.length)
      this.list = res.data

      this.total = res.data.length
    },
    // 删除用户
    async deleteUser (id) {
      try {
        await this.$confirm('确定删除吗')
        const data = {
          id: id
        }
        await remove(data)
        this.$message.success('删除员工成功')
        this.getUserList()
      } catch (error) {
        console.log(error)
      }
    },
    //  编辑用户信息
    async editUser (id) {
      this.userId = id
      this.showDialog = true
      const data = {
        id: this.userId
      }
      // 先进行数据的回显
      const res = await detail(data)
      this.formData = res.data
      // 点击确定相当于在一次发送添加新用户的功能
      // this.addUser(id)
    },
    async addUser () {
      if (this.userId) {
        const data = {
          avatar: this.formData.avatar,
          email: this.formData.email,
          id: this.userId,
          introduction: this.introduction,
          permission_group_id: this.formData.permission_group_id,
          phone: this.formData.phone,
          role: this.formData.role,
          username: this.formData.username
        }
        const res = await update(data)
        console.log(res)
      } else {
        await add(this.formData)
        console.log(this.formData)
      }

      // console.log(res)
      this.getUserList()
      this.$message(`${this.userId}` ? '编辑用户成功' : '新增用户成功')
      this.closeDialog()
    },
    //  获取 用户列表
    async getUserList () {
      this.loading = true
      const {
        data: { counts, list }
      } = await getUserlist(this.page)
      // console.log(res)
      this.total = counts
      this.list = list
      this.loading = false
    },
    // 关闭新增用户的弹层
    closeDialog () {
      this.showDialog = false
      this.formData = {
        username: '', // 用户姓名
        email: '', // 邮箱
        password: '', // 密码
        role: '', // 角色
        permission_group_id: '', // 权限组名称
        phone: '', // 联系电话
        introduce: '' // 介绍
      }
      this.$refs.formRef.resetFields()
    }
  }
}
</script>

<style scoped lang="scss">
.page-tools {
  margin: 10px 0;
  .record {
    line-height: 34px;
    i {
      margin-right: 5px;
      color: #919398;
    }
    display: inline-block;
    padding: 0px 10px;
    border-radius: 3px;
    background: #f4f4f4;
  }
}
</style>
